JSON の指定箇所のパスをコピーできる VS Code 拡張機能「copy-json-path」

ふじい(大)

2022.05.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

VS Code で開いている JSON ファイルの指定個所のパスをコピーできる拡張機能ってないのかなと調べたところ、そのまんまのものがあったので紹介します。

例えば以下のような JSON があったとします。 "g" を取得するためには a.b.c[1].foo[1] のように JSON のパスを指定して取得する必要があります。

{
  "a": {
    "b": {
      "c": [
        { "foo": ["d", "e"] },
        { "foo": ["f", "g"] }
      ]
    }
  }
}

上記は簡単な JSON なので人間が目で一個ずつ追っていけばいいのですが、minify されていたり、配列の長さが多かったりする場合は目で追っていくのは大変です。

また VS Code も JSON のパスをパンくずリストの形で示してくれていますが、サイズの大きい(?) JSON ファイルの場合は一部のみの表示になるようです。

↓ "network_border_group" を選択し、パンくずリストにも表示されている図

↓ "service" を選択していてもパンくずリストにはインデックスまでしか表示されていないの図。

（使用している JSON は AWS IP アドレスの範囲で公開されている JSON ファイルです）

copy-json-path

そういった悩みを解決してくれる VS Code 拡張機能が「copy-json-path」です。

インストールするだけで使用でき、JSON ファイルを開いている際の右クリックメニューに「Copy Json Path」が追加されます。

またコマンドパレットにも追加されています。

使用する際は上記のいずれかの方法を行うことで、JSON の選択箇所のパスがコピーできます。

JSON ファイルを操作することが多い人は入れておいても損はない拡張機能だと思います。